<template>
  <view class="page-detail" :style="{ background: backgroundColor }">
    <view
      :class="{
        'page-detail_box': true,
        'page-detail_box_height': $slots.footer,
      }"
      :style="{ height: $slots.footer ? `calc(100vh -  68px)` : `calc(100vh)` }"
    >
      <scroll-view
        v-if="isScroll"
        scroll-y
        class="scroll-view"
        @scrolltolower="scrollToLower"
        :style="{
          height: $slots.footer ? `calc(100vh -  68px)` : `calc(100vh)`,
        }"
        :lower-threshold="16"
        :scroll-into-view="scrollIntoView"
        :scroll-with-animation="true"
        :scrollTop="scrollTop"
      >
        <slot></slot>
      </scroll-view>
      <slot v-if="!isScroll"></slot>
    </view>
    <view class="page-detail_footer box_footer" v-if="$slots.footer">
      <slot name="footer"></slot>
    </view>
  </view>
</template>

<script>
export default {
  name: 'PageDetail',
  data() {
    return {
      scrollIntoView: '',
      scrollTop: 0,
      scrollViewHeight: 300,
    }
  },
  props: {
    showTitle: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
    backgroundColor: {
      type: String,
      default: '#fff',
    },
    isScroll: {
      type: Boolean,
      default: true,
    },
    isNavBar: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    scrollToLower() {
      this.$emit('scrollToLower')
    },
    onClickLeft() {
      uni.navigateBack({
        delta: 1,
      })
    },
    setComment(viewType) {
      const time = setTimeout(() => {
        this.scrollIntoView = viewType
        clearTimeout(time)
      }, 500)
    },
    scrollToBottom() {
      this.$nextTick(() => {
        uni
          .createSelectorQuery()
          .in(this)
          .select('#scroll-view-content')
          .boundingClientRect((res) => {
            let top = res.height - this.scrollViewHeight
            if (top > 0) {
              this.scrollTop = top
            }
          })
          .exec()
      })
    },
  },
  mounted() {
    this.$nextTick(() => {
      if (this.$refs.page) {
        const scrollView = this.$refs.page.$el.querySelector('.scroll-view')
        if (scrollView) {
          this.scrollViewHeight = scrollView.clientHeight
        }
      }
    })
  },
}
</script>
<style lang="scss" scoped>
.page-detail {
  .head-title {
    height: 40px;
  }
  //height: 100vh;
  //overflow: auto;
  box-sizing: border-box;
  .page-detail_box {
    overflow: auto;
  }
  .page-detail_box_height {
    //overflow: auto;
  }
  .page-detail_footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #fff;
    box-sizing: border-box;
    padding: 16px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 68px;
    z-index: 10;
  }
}
</style>
